<template>
	<div class="app-container">
		<div class="title">带有倾向性</div>
		<el-button plain @click="open3">
			成功
		</el-button>
		<el-button plain @click="open4">
			警告
		</el-button>
		<el-button plain @click="open5">
			消息
		</el-button>
		<el-button plain @click="open6">
			错误
		</el-button>
		<div class="title">自定义弹出位置</div>
		<el-button plain @click="open7">
			右上角
		</el-button>
		<el-button plain @click="open8">
			右下角
		</el-button>
		<el-button plain @click="open9">
			左下角
		</el-button>
		<el-button plain @click="open10">
			左上角
		</el-button>
	</div>
</template>

<script>
	export default {
		methods: {
			open3() {
				this.$notify({
					title: '成功',
					message: '这是一条成功的提示消息',
					type: 'success'
				});
			},

			open4() {
				this.$notify({
					title: '警告',
					message: '这是一条警告的提示消息',
					type: 'warning'
				});
			},

			open5() {
				this.$notify.info({
					title: '消息',
					message: '这是一条消息的提示消息'
				});
			},

			open6() {
				this.$notify.error({
					title: '错误',
					message: '这是一条错误的提示消息'
				});
			},
			open7() {
				this.$notify({
					title: '自定义位置',
					message: '右上角弹出的消息'
				});
			},

			open8() {
				this.$notify({
					title: '自定义位置',
					message: '右下角弹出的消息',
					position: 'bottom-right'
				});
			},

			open9() {
				this.$notify({
					title: '自定义位置',
					message: '左下角弹出的消息',
					position: 'bottom-left'
				});
			},

			open10() {
				this.$notify({
					title: '自定义位置',
					message: '左上角弹出的消息',
					position: 'top-left'
				});
			}
		}
	}
</script>

<style lang="scss">
	.app-container {
		.title {
			margin-top: 30px;
			margin-bottom: 10px;
		}
	}
</style>